<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less">
    <link rel="stylesheet/less" href="./less/loginPassword.less">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="login-top">
                <header class="title">
                    <div class="spell">修改登录密码</div>
                    <div @click="spellDeals">
                        <img src="./img/arrow_back.png"/>
                    </div>    
                </header>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <input type="number" maxlength="11" placeholder="请输入手机号" v-model="userPhone"/>
                    </li>
                    <li>
                        <ul>
                            <li>
                                <input type="number" maxlength="6" placeholder="请输入验证码" v-model="userCode"/>
                            </li>
                            <li  v-show="show" @click="getCode">获取验证码</li>
                            <li v-show="!show">{{count}}s</li>
                        </ul>
                    </li>
                    <li>
                        <input type="password" placeholder="请输入新密码" v-model="userPassword"/>
                    </li>
                    <li>
                        <input type="password" placeholder="再次输入密码" v-model="userResetPassword"/>
                    </li>
                </ul>
            </div>
            <div class="reset" @click="resetPassword">确认重置</div>
            <div id="toast" v-show="totasStatus">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                    <p class="weui-toast__content">{{toastName}}</p>
                </div>
            </div>
            <div id="textToast" v-show="tooltip">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast weui-toast_text">
                    <p class="weui-toast__content">{{tooltipName}}</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="module">
    import { loginCode, forgetPassword } from './js/request/api.js';
    import { shareLink } from './js/public.js';
    Vue.prototype.public = {shareLink};
    let app = new Vue({
        el: '#app',
        data: {
            count: '',
            show: true,
            timer: null,
            totasStatus: false,
            toastName: '',
            tooltip: false,
            tooltipName: '',
            userPhone: '',
            userCode: '',
            userPassword: '',
            userResetPassword: ''
        },
        mounted(){
           let that = this;
               that.public.shareLink();
        },
        methods:{

            getCode(){
                let that = this;
                if(that.userPhone == ''){
                        
                        that.tooltip = true;
                        that.tooltipName = '手机号不能为空';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false;
                    }else if(!(/^1[3|4|5|7|8|9]\d{9}$/.test(that.userPhone))){ 
                        
                        that.tooltip = true;
                        that.tooltipName = '手机号输入错误';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false; 
                    }else{
                        const TIME_COUNT = 60;
                        if (!this.timer) {
                            this.count = TIME_COUNT;
                            this.show = false;
                            this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                                } else {
                                this.show = true;
                                clearInterval(this.timer);
                                this.timer = null;
                                }
                            }, 1000)
                        }

                        loginCode({
                            account: that.userPhone
                        }).then(res=>{
                            that.totasStatus = true;
                            that.toastName = res.msg;  
                            setTimeout(()=>{
                                that.totasStatus = false;
                            },2000)
                            return false; 
                            
                        }).catch(function (error) {
                            console.log(error);
                        });
                    }
                },


            resetPassword(){
                let that = this;
                    
                if(that.userPhone == ''){
                        
                        that.tooltip = true;
                        that.tooltipName = '手机号不能为空';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false;
                }else if(!(/^1[3|4|5|7|8|9]\d{9}$/.test(that.userPhone))){ 
                        
                        that.tooltip = true;
                        that.tooltipName = '手机号输入错误';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false; 
                }else if(that.userCode == ''){
                        
                        that.tooltip = true;
                        that.tooltipName = '验证码不能为空';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false;
                }else if(!(/^\d{6}$/.test(that.userCode))){

                        that.tooltip = true;
                        that.tooltipName = '验证码输入错误';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false; 
                    
                }else if(that.userPassword == ''){

                        that.tooltip = true;
                        that.tooltipName = '密码不能为空';  
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                        return false;
                }else if(that.userResetPassword == ''){

                    that.tooltip = true;
                    that.tooltipName = '密码不能为空';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else if(that.userPassword!=that.userResetPassword){
                    that.tooltip = true;
                    that.tooltipName = '两次密码输入不一致';  
                    setTimeout(()=>{
                        that.tooltip = false;
                    },2000)
                    return false;
                }else{

                    forgetPassword({
                        account: that.userPhone,
                        smsCode: that.userCode,
                        newPwd: that.userResetPassword
                    }).then(res=>{
                        if(res.code !=0){
                            that.tooltip = true;
                            that.tooltipName = res.msg;  
                            setTimeout(()=>{
                                that.tooltip = false;
                            },2000)
                            return false; 
                         }  
                        if(res.code==0){
                            that.totasStatus = true;
                            that.toastName = res.msg;
                            setTimeout(()=>{
                                that.totasStatus = false;
                                window.location.href='./mine.html';
                            },2000)
                        }
                    }).catch(function (error) {
                        console.log(error);
                    }); 
                }
            },
            
            spellDeals(){
                let url = './setPassword.html';
                    window.location.href = url;
            },
        }
    })
</script>